// 居家、住养享受人数趋势图
<template>
  <div class="living_enjoyment_box" id="living_enjoyment"></div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'LivingEnjoyment',
  data () {
    return {
      jujiaTitleList: [],
      jujiaValueList: []
    }
  },
  mounted () {
    this.jujiaHandle()
    this.charts()
  },
  methods: {
    jujiaHandle () {
      this.$http.post(this.$api.HomeLiveTrend.homeLiveTrend, ' ', true).then(result => {
        let arr = result.data.result
        for (const value of arr.values()) {
          this.jujiaTitleList.push(value.tjny)
          this.jujiaValueList.push(value.xsrs)
        }
        this.charts(this.jujiaTitleList, this.jujiaValueList)
      })
    },
    charts (arrX, arrY) {
      let myChart = echarts.init(document.getElementById('living_enjoyment'))
      myChart.setOption({
        color: ['#3398DB'],
        title: {
          text: '居家享受人数',
          textStyle: {
            color: '#fff',
            fontSize: 30
          },
          top: '5%',
          left: '5%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '6%',
          right: '6%',
          top: '15%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: arrX,
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: '#00FFFF'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff', // 坐标字体颜色
                fontSize: 22
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff', // 坐标字体颜色
                fontSize: 22
              }
            },
            axisLine: {
              lineStyle: {
                color: '#00FFFF'
              }
            },
            itemStyle: {
              normal: {
                color: '#f5a142'
              }
            }
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: '35',
            itemStyle: {
              normal: {
                color: '#f5a142',
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: 'white',
                    fontSize: 18
                  }
                }
              }
            },
            data: arrY
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
  .living_enjoyment_box {
    width: 98%;
    height: 90%;
    position: absolute;
    left: 1rem;
    top: 4rem;
  }
</style>
